<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>过滤器：filter,进行格式的转换，例如金额、时间、日期的格式化</p>
    <p>{{cart[0].price | formatMoney | fMoney}}</p>
    <p>原始值：{{time}}</p>
    <p>秒数：{{time | formatTime('sec', 'cn')}}</p>
    <p>星期：{{time | formatTime('week', 'en')}}</p>
    <p>星期：{{time | formatTime('yyyy-mm-dd', 'cn')}}</p>
    <p>
      使用的步骤：
      1.注册过滤器（局部注册、全局注册）
      2.使用过滤器，通过管道符（|）调用
      注意：
      1.过滤器的第一个参数是它的管道符前面的整体,固定的必填参数；第二个第三个参数是过滤器括号中的参数，是选填的
      2.过滤器可以串联使用，后面的过滤器的原始数据就是前面的过滤器的结果
    </p>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 全局注册--在vue实例的外面，在前面。先注册后使用
    Vue.filter('fMoney', (val)=> {
      console.log(val);
      return val + '元'
    })
    let vm = new Vue({
      el: '#app',
      data: {
        time: new Date(),
        cart: [
          {
            name: 'vivo IQ777',
            img: 'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/166249/4/1781/100467/5ffc0654Eb618aa21/2188e4ef3f6abe7e.jpg.webp',
            price: 2999,
            num: 1,
            check: false
          }
        ]
      },
      // 过滤器(局部注册，带s)
      filters: {
        formatMoney(val) {
          console.log(val);
          return '￥' + val.toFixed(2)
        },
        formatTime(val, type1, type2) {
          console.log(val);
          console.log(type1);
          console.log(type2);
          let res;
          let today = '';
          if(type2 == 'cn') {
            today = '今天是'
          }else {
            today = 'today is'
          }
          if(type1 == 'sec') {
            return today + val.getSeconds()
          }else if(type1 == 'week') {
            return today + val.getDay()
          }else if(type1 == 'yyyy-mm-dd') {
            return today + val.getFullYear()+'-'+Number(val.getMonth()+1)+'-'+val.getDate()
          }
        }
      }
    })
  </script>
</body>

</html>